<template>
  <view class="main">
    <action-bar :options="navOptions" />
    <view class="background"></view>
    <view class="main-sum">
      <view class="name">{{ unitInfo.name || null }}</view>
      <view class="sum">
        <view class="sum-box">
          <span class="num">{{ unitInfo.fraction || 0 }} 分</span>
          <span>综合评分</span>
        </view>
        <view class="sum-box">
          <span class="num">{{ unitInfo.level || 'D' }}</span>
          <span>综合等级</span>
        </view>
      </view>
    </view>

    <view class="main-content">
      <view class="main-content-box" v-for="(item, index) in array" :key="index">
        <view class="top">
          <span class="title">{{ item.institutionName }}</span>
          <span class="time">更新时间: {{ item.createTime | formatTime }}</span>
        </view>
        <view class="sum">
          <view class="sum-box">
            <span class="num">{{ item.evaluationScore }}分</span>
            <span>评价分数</span>
          </view>
          <!-- <view class="sum-box">
            <span class="num">{{ item.totalLevel }}</span>
            <span>评价等级</span>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  filters: {
    formatTime(time) {
      const date = new Date(time);

      const year = date.getFullYear();    // 获取年份
      const month = String(date.getMonth() + 1).padStart(2, '0');  // 获取月份（0-11，需要+1）
      const day = String(date.getDate()).padStart(2, '0');        // 获取日期
      return `${year}-${month}-${day}`;
    }
  },
  data() {
    return {
      // 导航栏参数
      navOptions: {
        statusBar: "dark",
        left: {
          icon: "back",
        },
        center: {
          title: "执业评价",
        },
      },
      array: [],
      unitInfo: {
        name: null,
        fraction: null,
        level: null
      }
    };
  },
  onLoad() {
    this.getinstitutionList()
  },
  methods: {
    getinstitutionList() {
      let info = uni.getStorageSync('app_userInfo')
      let data = {
        agencyId: null,
        institutionName: null,
        unitId: null,
        pageSize: 10,
        userId: info.userId,
        pageNo: 1
      }
      this.$store.dispatch('getAssociationServerList', data).then(({ code, data: { records } }, msg) => {
        if (code == 200) {
          this.$set(this.unitInfo, 'name', records[0].name)
          this.$set(this.unitInfo, 'fraction', records[0].totalScore)
          this.$set(this.unitInfo, 'level', records[0].totalLevel)
          this.array = records[0].items
        } else {
          uni.showToast({
            title: msg,
            icon: 'none'
          })
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  min-height: 100vh;
  background-color: #f4f5f5;

  .background {
    width: 100%;
    height: 415rpx;
    background-image: url('./image/background.png');
    background-size: 100% 100%;
  }

  &-sum {
    width: calc(100% - 60rpx);
    margin: 0 auto 20rpx;
    font-size: 26rpx;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20rpx;
    border-radius: 20rpx;
    overflow: hidden;

    .sum {
      display: flex;
      flex-direction: row;
      align-items: center;

      &-box {
        flex: 1;
        background-color: #f4f5f5;
        height: 140rpx;
        display: inline-block;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
        margin: 20rpx;

        .num {
          font-size: 36rpx;
          font-weight: 700;
          color: #3b70ec;
        }
      }
    }

    .name {
      font-size: 34rpx;
    }
  }

  &-content {
    width: calc(100% - 60rpx);
    margin: 0 auto 20rpx;
    border-radius: 20rpx;
    overflow: hidden;

    &-box {
      background-color: #fff;
      border-bottom: 1rpx solid #e5e5e5;
      margin-bottom: 20rpx;

      .top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .title {
          font-size: 32rpx;
          font-weight: 700;
          color: #fff;
          padding-left: 30rpx;
          line-height: 68rpx;
          width: 372rpx;
          height: 68rpx;
          background-image: url('./image/icon.png');
          background-size: 100% 100%;
          box-sizing: border-box;
        }

        .time {
          font-size: 26rpx;
          width: calc(100% - 372rpx);
          height: 68rpx;
          line-height: 68rpx;
          text-align: right;
          padding-right: 20rpx;
          color: #a8a8a8;
          font-size: 24rpx;
          box-sizing: border-box;
        }
      }

      .sum {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom-left-radius: 20rpx;
        border-bottom-right-radius: 20rpx;

        &-box {
          flex: 1;
          background-color: #f4f5f5;
          height: 140rpx;
          display: inline-block;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 10rpx;
          margin: 20rpx;

          .num {
            font-size: 36rpx;
            font-weight: 700;
            color: #3b70ec;
          }
        }
      }
    }
  }
}
</style>
